<template>
  <ConfigProvider :locale="locale">
    <div class="mars-main-view" id="mars-main-view">
      <div id="centerDiv" class="centerDiv-container">
        <mars-map ref="marsMapRef" :url="configUrl" :options="mapOptions" @onload="marsOnload" @clickPoi="clickPoi" />
      </div>
      <div class="top_bg"></div>
      <div class="left_bg"></div>
      <div class="right_bg"></div>
      <div class="bottom_bg"></div>
      <div class="top">
        <div class="top_left">
          <!-- <div class="sqgk" @click="nowMoudleChange('sqgk')"></div> -->
          <div class="wwsg" @click="nowMoudleChange('wwsg')"></div>
        </div>
        <div class="top_right">
          <!-- <div class="lhll" @click="nowMoudleChange('lhll')"></div> -->
          <div class="elpa" @click="nowMoudleChange('elpa')"></div>
        </div>
        <div style="height: 50px; width: 30%; cursor: pointer; position: absolute; left: 35%" @click="nowMoudleChange('sqgk')"></div>
      </div>

      <div class="content_left">
        <sqjbxx class="slide-in-left" v-if="nowMoudle == 'sqgk'"></sqjbxx>
        <sqryfb class="slide-in-left" v-if="nowMoudle == 'sqgk'"></sqryfb>
        <jmrqsxfx class="slide-in-left" ref="jmrqsxfxRef" v-if="nowMoudle == 'sqgk'"></jmrqsxfx>
        <!-- <wgdzzll class="slide-in-left" v-if="nowMoudle == 'wwsg'" @toCenter="toCenter"></wgdzzll> -->
        <lxhdzzqk ref="lxhdzzqkRef" class="slide-in-left" v-if="nowMoudle == 'wwsg'" @toCenter="toCenter"></lxhdzzqk>
        <!-- <djll class="slide-in-left" v-if="nowMoudle == 'wwsg'"></djll> -->
        <zbgk ref="zbgkRef" class="slide-in-left" v-if="nowMoudle == 'wwsg'"></zbgk>
        <ylsh class="slide-in-left" v-if="nowMoudle == 'lhll'"></ylsh>
        <sqmy class="slide-in-left" v-if="nowMoudle == 'lhll'"></sqmy>
        <aqyj class="slide-in-left" v-if="nowMoudle == 'elpa'" @changeFxd="changeFxd" @changeFxdList="changeFxdList"> </aqyj>
        <yjyl class="slide-in-left" v-if="nowMoudle == 'elpa'"></yjyl>
        <bjsjtj class="slide-in-left" v-if="nowMoudle == 'elpa'"></bjsjtj>
        <!-- <elpaWgssdt class="slide-in-left" v-if="nowMoudle == 'elpa'"></elpaWgssdt> -->
      </div>
      <bottomElpaNew v-if="nowMoudle == 'elpa'" @itemClick="nowTypeChange"></bottomElpaNew>
      <!-- <bottomElpa v-if="nowMoudle == 'elpa'" @itemClick="nowTypeChange"></bottomElpa> -->
      <!-- <bottom v-if="nowMoudle != 'elpa' && nowMoudle != 'sqgk'"></bottom> -->
      <div class="content_right">
        <ggfw class="slide-in-right" v-if="nowMoudle == 'sqgk'" @setGgfwPoint="setGgfwPoint"></ggfw>
        <jydxfx class="slide-in-right" v-if="nowMoudle == 'sqgk'"></jydxfx>
        <!-- <sqfwqk class="slide-in-right" v-if="nowMoudle == 'sqgk'"></sqfwqk> -->
        <jmxq ref="jmxqRef" class="slide-in-right" v-if="nowMoudle == 'sqgk'"></jmxq>
        <wgssdt ref="wgssdtRef" class="slide-in-right" v-if="nowMoudle == 'wwsg'"></wgssdt>
        <!-- <wghd class="slide-in-right" v-if="nowMoudle == 'wwsg'"></wghd> -->
        <dzzhd class="slide-in-right" v-if="nowMoudle == 'wwsg'"></dzzhd>
        <zdgz ref="zdgzRef" class="slide-in-right" v-if="nowMoudle == 'wwsg'"></zdgz>
        <llhd class="slide-in-right" v-if="nowMoudle == 'lhll'"></llhd>
        <bmsh class="slide-in-right" v-if="nowMoudle == 'lhll'"></bmsh>
        <sqjy class="slide-in-right" v-if="nowMoudle == 'lhll'"></sqjy>

        <jksp class="slide-in-right" v-if="nowMoudle == 'elpa'"></jksp>
        <wrjkz class="slide-in-right" v-if="nowMoudle == 'elpa'"></wrjkz>
        <rwzx ref="rwzxRef" class="slide-in-right" v-if="nowMoudle == 'elpa'"></rwzx>
        <!-- <rwzx class="slide-in-right" v-if="nowMoudle == 'elpa'"></rwzx> -->
        <!-- <rwfx class="slide-in-right" v-if="nowMoudle == 'elpa'"></rwfx> -->
      </div>

      <div class="slide-in-right-btn" @click="wgqkPop" v-if="nowMoudle == 'wwsg'">查看网格分布图</div>

      <div class="slide-in-right-btn" @click="wyxtPop" v-if="nowMoudle == 'elpa'">五预系统</div>

      <div class="slide-in-left-btn" @click="sendMessagePop">发送消息</div>

      <!-- 事件 -->
      <!-- <div class="content_info">
        <div class="slide-in-right" v-if="infoModel">
          <div class="relative flexs marbot_10 clickable" @click="handleTufashijian">
            <img src="../../../public/img/info/hong.png" alt="" class="img" />
            <div class="num flexs justify_center align_center">
              <div class="numtip">{{ tfsjTotal }}</div>
            </div>
            <div class="detail flexs align_center">
              <div class="hongTitle">突发事件</div>
            </div>
          </div>
          <div class="relative flexs marbot_10 clickable" @click="handleZdjy">
            <img src="/public/img/info/lan.png" alt="" class="img" />
            <div class="num flexs justify_center align_center">
              <div class="numtip">{{ zdjyTotal }}</div>
            </div>
            <div class="detail flexs align_center">
              <div class="lanTitle">重点建议</div>
            </div>
          </div>
        </div>
      </div> -->

      <template v-if="loaded">
        <template v-for="comp in widgets" :key="comp.key">
          <!-- <mars-widget v-if="openAtStart.includes(comp.name) && comp.visible" v-model:visible="comp.visible" :widget="comp" /> -->
        </template>
      </template>
    </div>
    <ggcsggfwcsxqModal ref="ggcsggfwcsxqModalRef" @xfrw="xfrwClick"></ggcsggfwcsxqModal>
    <xfrwModal ref="xfrwModalRef" @close="xfrwModalClose"></xfrwModal>
    <fxdModal ref="fxdModalRef" @btnClick="fxdModalClick"></fxdModal>
    <rqxqModal ref="rqxqModalRef"></rqxqModal>
    <qyxqModal ref="qyxqModalRef"></qyxqModal>
    <wgModal ref="wgModalRef"></wgModal>
    <spdzModal ref="spdzModalRef"></spdzModal>
    <wgllModal ref="wgllModalRef" @close="wgllModalClose"></wgllModal>
    <xfwrjrwModal ref="xfwrjrwModalRef" @close="xfwrjrwModalClose"></xfwrjrwModal>
    <zdjyModel ref="zdjyModalRef"></zdjyModel>
    <xcczryModal ref="xcczryModalRef" @close="xcczryModalClose"></xcczryModal>
    <tfsjModal ref="tfsjModalRef" @btnclick="TfsjBtnclick"></tfsjModal>
    <rlSxtModal ref="rlSxtModalRef"></rlSxtModal>
    <swSxtModal ref="swSxtModalRef"></swSxtModal>
    <dtSxtModal ref="dtSxtModalRef"></dtSxtModal>
    <gkpwSxtModal ref="gkpwSxtModalRef"></gkpwSxtModal>
    <pwSxtModal ref="pwSxtModalRef"></pwSxtModal>
    <shljSxtModal ref="shljSxtModalRef"></shljSxtModal>
    <znfhSxtModal ref="znfhSxtModalRef"></znfhSxtModal>
    <yySxtModal ref="yySxtModalRef"></yySxtModal>
    <spModal ref="spModalRef"></spModal>
    <loucengModal ref="loucengModalRef"></loucengModal>
    <wgqkModel ref="wgqkModelRef"></wgqkModel>
    <zjfModel ref="zjfModelRef" :gwjfData="gwjfData"></zjfModel>
    <wyxtModel ref="wyxtModelRef"></wyxtModel>

    <sjxqModal ref="sjxqModalRef"></sjxqModal>
    <wurenjiPop></wurenjiPop>

    <dangerous ref="dangerousRef"></dangerous>
  </ConfigProvider>
</template>

<script setup lang="ts">
/**
 * 渲染主入口
 * @copyright 火星科技 mars3d.cn
 * @author 火星渣渣灰 2022-02-19
 */
import zhCN from "ant-design-vue/es/locale/zh_CN"
import { computed, nextTick, onMounted, provide, ref, onBeforeUnmount } from "vue"
import { mqttClient } from "./mqtt.js"
import $api from "@mars/utils/request.js"
import axios from "axios"
import { ConfigProvider } from "ant-design-vue"
import { useWidgetStore } from "@mars/common/store/widget"
import MarsMap from "@mars/components/mars-work/mars-map.vue"
import MarsWidget from "./widget.vue"
import { logInfo } from "@mars/utils/mars-util"
import sqjbxx from "./sqgk/sqjbxx.vue"
import sqfwqk from "./sqgk/sqfwqk.vue"
import jmxq from "./sqgk/jmxq.vue"
import sqryfb from "./sqgk/sqryfb.vue"
import jmrqsxfx from "./sqgk/jmrqsxfx.vue"
import ggfw from "./sqgk/ggfw.vue"
import jydxfx from "./sqgk/jydxfx.vue"
import djll from "./wwsg/djll.vue"
import zbgk from "./wwsg/zbgk.vue"
import wgssdt from "./wwsg/wgssdt.vue"
import lxhdzzqk from "./wwsg/lxhdzzqk.vue"
import wgdzzll from "./wwsg/wgdzzll.vue"
import wghd from "./wwsg/wghd.vue"
import dzzhd from "./wwsg/dzzhd.vue"
import zdgz from "./wwsg/zdgz.vue"
import ylsh from "./lhll/ylsh.vue"
import sqmy from "./lhll/sqmy.vue"
import llhd from "./lhll/llhd.vue"
import bmsh from "./lhll/bmsh.vue"
import sqjy from "./lhll/sqjy.vue"
import yjyl from "./elpa/yjyl.vue"
import jksp from "./elpa/jksp.vue"
import wrjkz from "./elpa/wrjkz.vue"
import elpaWgssdt from "./elpa/wgssdt.vue"
import aqyj from "./elpa/aqyj.vue"
import rwzx from "./elpa/rwzx.vue"
import rwfx from "./elpa/rwfx.vue"
import bottom from "./bottom/bottom.vue"
import bottomElpa from "./bottom/bottomElpa.vue"
import bottomElpaNew from "./bottom/bottomElpaNew.vue"
import bjsjtj from "./elpa/bjsjtj.vue"
import wurenjiPop from "../../widgets/demo/wurenjiPop/index.vue"
import dangerous from "../../widgets/demo/dangerous/index.vue"

import ggcsggfwcsxqModal from "./mConponents/modal/ggfwcsxqModal.vue"
import xfrwModal from "./mConponents/modal/xfrwModal.vue"
import fxdModal from "./mConponents/modal/fxdModal.vue"
import rqxqModal from "./mConponents/modal/rqxqModal.vue"
import qyxqModal from "./mConponents/modal/qyxqModal.vue"
import wgModal from "./mConponents/modal/wgModal.vue"
import spdzModal from "./mConponents/modal/spdzModal.vue"
import wgllModal from "./mConponents/modal/wgllModal.vue"
import xfwrjrwModal from "./mConponents/modal/xfwrjrwModal.vue"
import xcczryModal from "./mConponents/modal/xcczryModal.vue"
import tfsjModal from "./mConponents/modal/tfsjModal.vue"
import zdjyModel from "./mConponents/modal/zdjyModel.vue"

import rlSxtModal from "./mConponents/modal/sxt/rlSxtModal.vue"
import swSxtModal from "./mConponents/modal/sxt/swSxtModal.vue"
import dtSxtModal from "./mConponents/modal/sxt/dtSxtModal.vue"
import gkpwSxtModal from "./mConponents/modal/sxt/gkpwSxtModal.vue"
import pwSxtModal from "./mConponents/modal/sxt/pwSxtModal.vue"
import shljSxtModal from "./mConponents/modal/sxt/shljSxtModal.vue"
import znfhSxtModal from "./mConponents/modal/sxt/znfhSxtModal.vue"
import yySxtModal from "./mConponents/modal/sxt/yySxtModal.vue"
import wgqkModel from "./mConponents/modal/wgqkModel.vue"
import zjfModel from "./mConponents/modal/zjfModal.vue"
import wyxtModel from "./mConponents/modal/wyxtModel.vue"
import sjxqModal from "./mConponents/modal/sjxqModal.vue"

import spModal from "./mConponents/modal/spModal.vue"

import loucengModal from "./mConponents/modal/loucengModal.vue"
import { info } from "console"

const showWurenji = ref(false)
const xiafarenwu = ref("")
const showWurenjiType = ref(1)
provide("showWurenji", showWurenji)
provide("xiafarenwu", xiafarenwu)
// 旋转
const rotatePoint = ref(null)
provide("rotatePoint", rotatePoint)

const locale = zhCN
const infoModel = ref(false)
const widgetStore = useWidgetStore()

const widgets = computed(() => widgetStore.state.widgets)
const openAtStart = computed(() => widgetStore.state.openAtStart)
const handleZdjy = () => {
  console.log("点击重点建议")
  zdjyModalRef.value.show()
}
const props = withDefaults(
  defineProps<{
    mapOptions?: any
    url?: string
  }>(),
  {
    mapOptions: () => ({}),
    url: null
  }
)
const configUrl = props.url ?? `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`

let mapInstance: any = null
provide("getMapInstance", () => {
  return mapInstance
})

const emit = defineEmits(["mapLoaded"])
const showTFSJshow = ref(false)
const handleTufashijian = () => {
  if (showTFSJshow.value) {
    // marsMapRef.value.settfsjPoint(false)
  } else {
    // marsMapRef.value.settfsjPoint(true)
  }
  showTFSJshow.value = !showTFSJshow.value
}

const toCenter = (e) => {
  console.log(e)
  // marsMapRef.value.toCenter(e)
}
const setGgfwPoint = (e) => {
  console.log(e)
  marsMapRef.value.setGgfwPoint(e)
}
const loaded = ref(false)
const marsOnload = (map: any) => {
  logInfo("map构造完成", map)
  mapInstance = map
  emit("mapLoaded", mapInstance)
  loaded.value = true
  nowMoudle.value = "sqgk"
  infoModel.value = true

  marsMapRef.value.setSqbjMain()

  // marsMapRef.value.setDqfwzxPoint()
  // setPoint()
}
const fxdModalRef = ref(null)
const ggcsggfwcsxqModalRef = ref(null)
const rqxqModalRef = ref(null)
const qyxqModalRef = ref(null)
const wgModalRef = ref(null)
const checkFxdData = ref(null)
const rlSxtModalRef = ref(null)
const swSxtModalRef = ref(null)
const dtSxtModalRef = ref(null)
const gkpwSxtModalRef = ref(null)
const pwSxtModalRef = ref(null)
const shljSxtModalRef = ref(null)
const znfhSxtModalRef = ref(null)
const zdjyModalRef = ref(null)
const yySxtModalRef = ref(null)
const sjxqModalRef = ref(null)
const dangerousRef = ref(null)
const clickPoi = (e) => {
  const type = e.type
  console.log(e.type)
  console.log("type:", type)

  if (type === "风险点") {
    checkFxdData.value = e.data
    fxdModalRef.value.show(e.data)
  } else if (type === "wgy") {
    rqxqModalRef.value.show()
  } else if (type === "qiye") {
    qyxqModalRef.value.show()
  } else if (type === "wgpq") {
    const data = e.data
    wgModalRef.value.show(data)
  } else if (type === "sxt_rl") {
    const data = e.data
    const device_no = e.device_no
    rlSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_sw") {
    const data = e.data
    const device_no = e.device_no
    swSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_pw") {
    const data = e.data
    const device_no = e.device_no
    pwSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_dt") {
    const data = e.data
    const device_no = e.device_no
    dtSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_shlj") {
    const data = e.data
    const device_no = e.device_no
    shljSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_gkpw") {
    const data = e.data
    const device_no = e.device_no
    gkpwSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_znfh") {
    const data = e.data
    const device_no = e.device_no
    znfhSxtModalRef.value.show({ data, device_no })
  } else if (type === "sxt_yydy") {
    const data = e.data
    const device_no = e.device_no
    yySxtModalRef.value.show({ data, device_no })
  } else if (type === "ggfw") {
    const data = e.data
    ggcsggfwcsxqModalRef.value.show(data)
  } else if (type === "tfsj") {
    const data = e.data
    tfsjModalRef.value.show(data)
  } else if (type === "巡逻点") {
    console.log(type)
  } else if (type === "gwjf") {
    console.log(type)
    zjfPop(e)
  } else if (type === "shexiangtouPoint") {
    const data = e.data
    const device_no = e.device_no
    znfhSxtModalRef.value.show({ data, device_no })
  } else {
    znfhSxtModalRef.value.show()
  }
  //
}
const xfrwClick = () => {
  ggcsggfwcsxqModalRef.value.close()
  xfrwShow()
}
const xfwrjrwModalRef = ref(null)
const wgllModalRef = ref(null)
const xcczryModalRef = ref(null)
const nType = ref("")
const wgllModalClose = () => {
  fxdModalRef.value.show(checkFxdData.value)
}
const xfwrjrwModalClose = () => {
  fxdModalRef.value.show(checkFxdData.value)
}
const xcczryModalClose = () => {
  if (nType.value === "fxd") {
    fxdModalRef.value.show(checkFxdData.value)
  } else if (nType.value === "tfsj") {
    tfsjModalRef.value.show()
  }
}
const fxdModalClick = (e, data) => {
  nType.value = "fxd"
  if (e === 1) {
    wgllModalRef.value.show(data)
    fxdModalRef.value.close()
  } else if (e === 2) {
    xfwrjrwModalRef.value.show()
    fxdModalRef.value.close()
  } else if (e === 3) {
    xcczryModalRef.value.show(data)
    fxdModalRef.value.close()
  } else if (e === 4) {
    xfrwModalRef.value.show()
    fxdModalRef.value.close()
  }
}

const TfsjBtnclick = (e) => {
  // console.log("点击下发任务：", e)
  nType.value = "tfsj"
  if (e === 1) {
    xcczryModalRef.value.show()
    tfsjModalRef.value.close()
  } else if (e.type === 3) {
    xfrwModalRef.value.show(e.data)
    tfsjModalRef.value.close()
  }
}

const xfrwModalRef = ref(null)
const xfrwShow = () => {
  fxdModalRef.value.show(checkFxdData.value)
}
const xfrwModalClose = (e) => {
  if (nType.value === "fxd") {
    fxdModalRef.value.show(checkFxdData.value)
  } else if (nType.value === "tfsj") {
    tfsjModalRef.value.show(e)
  } else {
    ggcsggfwcsxqModalRef.value.show()
  }
}

const nowType = ref("sxt")
const marsMapRef = ref(null)
const nowMoudle = ref("")
const changeFxd = (e) => {
  nowType.value = ""
  // marsMapRef.value.setFxdMian(e)
}
const changeFxdList = (e, list) => {
  nowType.value = ""

  // marsMapRef.value.pointLayerClear()
  // marsMapRef.value.setFxdListMian(e, list)
}
const tfsjModalRef = ref(null)
const nowMoudleChange = (e) => {
  if (nowMoudle.value === e && e !== "sqgk") {
    return
  }
  nowMoudle.value = e
  if (e === "elpa") {
    // tfsjModalRef.value.show()
    nowType.value = "sxt"
    if (nowType.value === "sxt") {
      marsMapRef.value.setsxtPoint()
    }
    marsMapRef.value.removeAll() // 清除鹭鸶湖小区点位
  } else if (e === "sqgk") {
    marsMapRef.value.setSqbjMain()
    // marsMapRef.value.setDqfwzxPoint()
    mapInstance.activeViewer.flyIn([105.56484, 30.46759, 135.68], [308.72, -17.52, 0], 1)
  } else {
    marsMapRef.value.clearPoint(e, mapInstance)
    marsMapRef.value.removeAll() // 清除鹭鸶湖小区点位
  }
}

const nowTypeChange = async (e) => {
  if (nowType.value === e.type) {
    return
  }
  nowType.value = e.type
  if (nowType.value === "sxt") {
    marsMapRef.value.setsxtPoint()
  } else if (nowType.value === "xld") {
    marsMapRef.value.setXldPoint()
  } else if (nowType.value === "sscs") {
    const res = await $api.get("/api/V1/getAqyj")
    if (res.code === 1) {
      const ybData = []
      const jdData = []
      const zdData = []

      res.data.forEach((e) => {
        if (e.fxdj === "1") {
          zdData.push(e)
        } else if (e.fxdj === "2") {
          jdData.push(e)
        } else if (e.fxdj === "3") {
          ybData.push(e)
        }
      })

      console.log(ybData, jdData, zdData)
      marsMapRef.value.removeAll()
      marsMapRef.value.setFxdListMian("zd", zdData)
      marsMapRef.value.setFxdListMian("jd", jdData)
      marsMapRef.value.setFxdListMian("yb", ybData)
      // console.log("Data fetched successfully:", res.data)
      // Process the data as needed
    }
  } else if (nowType.value === "wzcbd") {
    marsMapRef.value.setWzcbdPoint()
  } else if (nowType.value === "gwjz") {
    marsMapRef.value.setgwjfPoint(e.data)
  }
}

const tfsjTotal = ref(0)
const zdjyTotal = ref(0)
const shijianinfo = async () => {
  const res = await $api.get("api/index/get_appeal_list", { big_type: 3, page: 1, pageSize: 10 })
  tfsjTotal.value = res.data.total
  const ress = await $api.get("api/V1/getZdjy", { page: 1, pagesize: 1000 })
  zdjyTotal.value = ress.data.total
}

onMounted(() => {
  window.addEventListener("keydown", keyDown)
  connetcMqtt()
  shijianinfo()
  // setPoint()
})

const spModalRef = ref(null)
const loucengModalRef = ref(null)
provide("loucengModalRef", loucengModalRef)

// 查看网格分布图
const wgqkModelRef = ref(null)
provide("wgqkModelRef", wgqkModelRef)
const zjfModelRef = ref(null)
provide("zjfModelRef", zjfModelRef)
const wgqkPop = () => {
  wgqkModelRef.value.show()
}
const gwjfData = ref({})
const zjfPop = (e) => {
  gwjfData.value = e
  zjfModelRef.value.show()
}

// 五预系统
const wyxtModelRef = ref(null)
provide("wyxtModelRef", wyxtModelRef)

const wyxtPop = () => {
  wyxtModelRef.value.show()
}

const jmxqRef = ref(null)
const jmrqsxfxRef = ref(null)
const lxhdzzqkRef = ref(null)
const zbgkRef = ref(null)
const wgssdtRef = ref(null)
const zdgzRef = ref(null)
const rwzxRef = ref(null)
const connetcMqtt = () => {
  mqttClient.connect()
  mqttClient.onMessage((topic, message) => {
    // 如果是JSON数据：
    const data = JSON.parse(message)
    console.log("收到消息:", data)
    if (data.type === "changeModal") {
      nowMoudleChange(data.val)
    }
    if (data.type === "jmxqModalChange") {
      if (data.val) {
        jmxqRef.value.showXqModal()
      } else if (!data.val) {
        jmxqRef.value.closeXqModal()
      }
    }
    if (data.type === "rqModalChange") {
      if (data.state) {
        jmrqsxfxRef.value.showRqModal(data.val)
      } else if (!data.state) {
        jmrqsxfxRef.value.closeRqModal()
      }
    }

    if (data.type === "ggfwChange") {
      // marsMapRef.value.setGgfwPoint(data.val)
    }
    if (data.type === "ggfwModalChange") {
      if (data.state) {
        ggcsggfwcsxqModalRef.value.show(data.val)
      } else if (!data.state) {
        ggcsggfwcsxqModalRef.value.close()
      }
    }

    if (data.type === "dzzqkModalChange") {
      if (data.state) {
        lxhdzzqkRef.value.wgModalShow(data.val, data.index)
      } else if (!data.state) {
        lxhdzzqkRef.value.wgModalClose()
      }
    }

    if (data.type === "dzzqkYj") {
      lxhdzzqkRef.value.dblwgClick(data.val)
    }
    if (data.type === "zbgkPre") {
      zbgkRef.value.pre()
    }
    if (data.type === "zbgkNext") {
      zbgkRef.value.next()
    }

    if (data.type === "wgssdtModalChange") {
      if (data.state) {
        wgssdtRef.value.wgssztModalRefShow(data.val)
      } else if (!data.state) {
        wgssdtRef.value.wgssztModalClose()
      }
    }
    if (data.type === "wgssdtDetailModalChange") {
      if (data.state) {
        wgssdtRef.value.wgssdtDetailModalShow()
      } else if (!data.state) {
        wgssdtRef.value.wgssdtDetailModalClose()
      }
    }

    if (data.type === "zdgzChange") {
      zdgzRef.value.checkedChange1(data.val)
    }

    if (data.type === "zdFxShow") {
      nowType.value = ""
      // marsMapRef.value.pointLayerClear()
      // marsMapRef.value.setFxdListMian("zd", data.val)
    }
    if (data.type === "jdFxShow") {
      nowType.value = ""
      // marsMapRef.value.pointLayerClear()
      // marsMapRef.value.setFxdListMian("jd", data.val)
    }
    if (data.type === "ybFxShow") {
      nowType.value = ""
      // marsMapRef.value.pointLayerClear()
      // marsMapRef.value.setFxdListMian("yb", data.val)
    }

    if (data.type === "aiModalChange") {
      if (data.state) {
        rwzxRef.value.aisbModalShow(data.val)
      } else if (!data.state) {
        rwzxRef.value.aisbModalClose()
      }
    }
    if (data.type === "aiDetailModalChange") {
      if (data.state) {
        rwzxRef.value.aiDetailModalShow()
      } else if (!data.state) {
        rwzxRef.value.aiDetailModalClose()
      }
    }

    if (data.type === "dbanClick") {
      nowTypeChange(data.val)
    }

    // 报警弹窗
    if (data.type === "appeal") {
      console.log(data)
      if (isdangerousPop.value) {
        return
      }
      isdangerousPop.value = true
      dangerousRef.value.get_appeal_detail(data.id)
      marsMapRef.value.get_appeal(data)
      // sjxqModalRef.value.show({ id: data.id })
    }
    // 处理数据...
  })
}

onBeforeUnmount(() => {
  mqttClient.disconnect()
})

const spdzModalRef = ref(null)
const keyDown = (event) => {
  if (event.key === "F7" || event.code === "F7") {
    spdzModalRef.value.show()
  }
}

const sendMessagePop = () => {
  mqttClient.publish(
    "topic/push/appeal/detail",
    JSON.stringify({
      type: "appeal",
      id: "17181",
      device_id: "111",
      device_name: "克拉中心3栋正外低",
      device_no: "c5e09b0a358d42c18521bb747caf3bee"
    })
  )
}

const showWurenjiPop = () => {
  console.log("打开无人机")
  console.log("打开无人机", widgetStore)
  if (showWurenjiType.value === 1) {
    showWurenji.value = true
    showWurenjiType.value = 2
  } else {
    showWurenji.value = false
    showWurenjiType.value = 1
  }

  widgetStore.dispatch("activate", "wurenjiPop")
  // widgetStore.activate("wurenjiPop")
}

// 报警弹窗
const isdangerousPop = ref(false)
provide("isdangerousPop", isdangerousPop)
const dangerousData = ref({})
provide("dangerousData", dangerousData)

// 轮询接口
const pollingAlert = () => {
  // 2秒轮询一次
  axios.get("https://wstsecure-api.chuangxing.ren/api/v1/fire_event?app_id=83ee227e01&identity=991d22cea8722095b32dff82dbfde6c2").then((res: any) => {
    if (res.id && !isdangerousPop.value) {
      isdangerousPop.value = true
      dangerousData.value = res
      widgetStore.dispatch("activate", "dangerous")
    }
    // console.log('警报', res)
  })
}
</script>
<style>
.ant-modal .ant-modal-content {
  background: #001a1dcc;
  padding: 0px;
}

.ant-modal .ant-modal-header {
  background: #001a1d00;
}
</style>
<style lang="less" scoped>
.slide-in-left {
  animation: slideInFromLeft 0.5s ease-out;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInFromRight 0.5s ease-out;
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.content_info {
  position: absolute;
  width: 193.45px;
  right: 350px;
  top: 80px;
  z-index: 99;
}

.content_info .img {
  width: 193.45px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content_info .num {
  width: 44.94px;
  height: 50px;
}

.content_info .num .numtip {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.content_info .detail {
  flex: 1;
  padding: 8px 6.5px;
  box-sizing: border-box;
}

.content_info .detail .hongTitle {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, #ff5f62 0%, #ffdada 100%);

  /* 使背景仅作用于文字 */
  -webkit-background-clip: text;
  background-clip: text;

  /* 设置文字颜色透明，以显示背景渐变 */
  color: transparent;

  /* 兼容性优化 */
  display: inline-block;
  /* 确保渐变效果正确应用 */
}

.content_info .detail .title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(217, 217, 217, 1);
}

.content_info .detail .lanTitle {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, #5f8cff 0%, #dafdff 100%);
  -webkit-background-clip: text;
  background-clip: text;

  /* 设置文字颜色透明，以显示背景渐变 */
  color: transparent;

  /* 兼容性优化 */
  display: inline-block;
  /* 确保渐变效果正确应用 */
}

.mars-main-view {
  height: 100%;
  width: 100%;
  position: relative;
}

.centerDiv-container {
  // background-color: var(--mars-base-bg) !important;
  background-color: var(--mars-base-bg) !important;
  color: var(--mars-text-color) !important;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.top_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, #000000, #00000099, #00000000);
  // background-color: #000000;
}

.left_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100vh;
  background: linear-gradient(to right, #000000, #00000099, #00000000);
  // background-color: #000000;
}

.right_bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100vh;
  background: linear-gradient(to left, #000000, #00000099, #00000000);
  // background-color: #000000;
}

.bottom_bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #000000, #00000099, #00000000);
  // background-color: #000000;
}

.top {
  background-image: url("/img/myimg/topBg.png");
  background-size: 100% 116px;
  width: 100%;
  height: 116px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;

  .top_left {
    display: flex;
    // flex:1;

    padding-left: 120px;
    justify-content: center;

    .sqgk {
      background-image: url("/img/myimg/sqgk.png");
      background-size: 140px 26px;
      background-repeat: no-repeat;
      width: 140px;
      height: 26px;
      margin-top: 15px;
    }

    .wwsg {
      background-image: url("/img/myimg/wwsg.png");
      background-size: 140px 26px;
      background-repeat: no-repeat;
      width: 140px;
      height: 26px;
      margin-top: 15px;
    }
  }

  .top_title {
    flex: 1;
    text-align: center;
    height: 50px;
    font-family: YouSheBiaoTiHei;
    font-weight: 700;
    font-size: 22px;
    line-height: 50px;
    letter-spacing: 0%;
  }

  .top_right {
    display: flex;
    // flex:1;
    padding-right: 120px;
    justify-content: center;

    .lhll {
      background-image: url("/img/myimg/lhll.png");
      background-size: 140px 26px;
      background-repeat: no-repeat;
      width: 140px;
      height: 26px;
      margin-top: 15px;
    }

    .elpa {
      background-image: url("/img/myimg/elpa.png");
      background-size: 140px 26px;
      background-repeat: no-repeat;
      width: 140px;
      height: 26px;
      margin-top: 15px;
    }
  }
}

.content_right {
  position: absolute;
  width: 330px;
  right: 10px;
  top: 60px;
  // background-color: #000;
  // color: #fff;
}

.content_left {
  position: absolute;
  width: 330px;
  left: 10px;
  top: 60px;
  // background-color: #000;
  // color: #fff;
}

.mars-main-view {
  // box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5), inset 0 0 20px 10px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 20px 10px rgba(0, 0, 0, 0.5),
    inset 0 0 20px 10px rgba(0, 0, 0, 1);
  // border-radius: 10px;
}

.clickable {
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
  /* 最常用的手型样式 */
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.flexs {
  display: flex;
}

.justify_between {
  justify-content: space-between;
}

.justify_center {
  justify-content: center;
}

.align_center {
  align-items: center;
}

.flex_column {
  flex-direction: column;
}

.marbot_10 {
  margin-bottom: 10px;
}

.slide-in-right-btn {
  padding: 10px 0;
  background-color: #2979ff;
  width: 120px;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
  position: absolute;
  bottom: 40px;
  left: 20px;
}

.slide-in-left-btn {
  padding: 10px 0;
  background-color: #2979ff;
  width: 120px;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
  position: absolute;
  bottom: 40px;
  right: 20px;
}
</style>
